<template>
  <!-- 资讯分类管理 -->
  <div class="user_list">
    <div class="btns">
      <el-form :inline="true" size="small">
        <el-button type="primary" size="small" @click="toAdd">添加</el-button>
      </el-form>
    </div>
    <el-table
      :data="categories"
      size="small"
      v-loading="loading"
      style="width: 100%; margin-bottom: 20px"
      row-key="id"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
    >
      <el-table-column prop="name" width="150" label="名称" align="center" />
      <el-table-column prop="no" label="排序号" align="center" />
      <el-table-column label="父栏目" align="center">
        <template slot-scope="scope">
          <div v-if="scope.row.parentId === null">无</div>
          <div v-else>{{ scope.row.parentId }}</div>
        </template>
      </el-table-column>
      <el-table-column prop="description" label="描述" align="center" />
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button
            type="text"
            style="color: red"
            size="small"
            @click.prevent="deleteHandler(scope.row.id)"
          >
            移除
          </el-button>
          <el-button
            type="text"
            style="color: #008964"
            size="small"
            @click.prevent="toEdit(scope.row)"
          >
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 模态框 -->
    <el-dialog
      :title="title"
      :visible.sync="visible"
      width="50%"
      @close="clearValidate"
    >
      <div>
        <el-form
          :model="form"
          ref="categoryForm"
          :rules="rules"
          label-width="80px"
        >
          <el-form-item label="名称" prop="name">
            <el-input v-model="form.name"></el-input>
          </el-form-item>
          <el-form-item label="序号" prop="no">
            <el-input v-model="form.num"></el-input>
          </el-form-item>
          <el-form-item label="父栏目" prop="parentId">
            <!-- {{ categoryData }} -->
            <el-cascader
              v-model="form.parentId"
              :options="categoryData"
              @change="handleChange"
            >
              <template slot-scope="{ data }">
                <span>{{ data.id }}</span>
                <span> ({{ data.name }}) </span>
              </template>
            </el-cascader>
            <!-- <el-select v-model="form.parentId"> -->
            <!-- <el-option
                v-for="c in categoryData.list"
                :label="c.name"
                :value="c.id"
                :key="c.id"
              ></el-option> -->
            <!-- </el-select> -->
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="visible = false">取消</el-button>
        <el-button size="small" type="primary" @click="submitHandler"
          >确定</el-button
        >
      </span>
    </el-dialog>
    <!-- /模态框 -->
  </div>
</template>
<script>
import { get, post, del } from "@/utils/request";

import qs from "querystring";
export default {
  data() {
    return {
      form: {},
      loading: false,
      visible: false,
      title: "添加资讯分类",
      categoryData: [],
      categories: [],
      props: { multiple: true, value: "id", label: "name", emitPath: false },
      rules: {
        name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
      },
    };
  },
  created() {
    this.loadCategories();
    this.loadCategory();
  },
  methods: {
    loadCategories() {
      this.loading = true;
      get("/category/findCategoryTree").then((response) => {
        // console.log(response);
        this.categories = response.data;
        this.loading = false;
      });
    },
    loadCategory() {
      this.loading = true;
      get("/category/findAll").then((response) => {
        console.log(response);
        this.categoryData = response.data;
        this.loading = false;
      });
    },
    handleChange(value) {
      console.log(value);
      this.form.parentId = value;
    },
    submitHandler() {
      this.$refs["categoryForm"].validate((valid) => {
        if (valid) {
          const url = "/category/saveOrUpdate";
          post(url, this.form).then((response) => {
            this.$message({ message: response.message, type: "success" });
            this.loadCategories();
            this.visible = false;
          });
        } else {
          return false;
        }
      });
    },
    toAdd() {
      this.title = "添加资讯分类";
      this.form = {};
      this.visible = true;
    },

    deleteHandler(id) {
      this.$confirm("此操作将永久删除该资讯分类, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const url = "/category/deleteById";
        get(url, { id }).then((response) => {
          this.$message({ type: "success", message: response.message });
          this.loadCategories();
        });
      });
    },
    toEdit(record) {
      this.title = "修改资讯分类";
      this.form = record;
      this.visible = true;
    },
    toDetails(row) {
      this.$router.push({
        // path:'/sys/user/Details',
        name: "_sys_user_Details",
        query: row,
      });
    },
    // 重置表单校验
    clearValidate() {
      this.$refs["categoryForm"].clearValidate();
    },
  },
};
</script>
